<script setup lang="ts">
import Grid from "@/components/framework/grid.vue";
import CustomIcon from "@/components/framework/icon";
import { shallowRef, watch } from "vue";
import ToggleView from "@/components/framework/toggle-view.vue";
import type { LazyComponent } from "@/framework/vue/types";
import ToggleItem from "@/components/framework/toggle-item.vue";
import { useSessionShallowRef } from "@/framework/vue/hooks";
import { useAppStore } from "@/store/app-store";

type ToolItem = {
  key: string;
  name: string;
  icon: string;
  component: LazyComponent;
};

defineOptions({ name: "main-page" });

const tools = shallowRef<ToolItem[]>([
  { key: "nodejs", name: "NodeJS", icon: "icon-nodejs", component: () => import("../tools/nodejs/nodejs-manager.vue") },
  { key: "java", name: "Java", icon: "icon-java", component: () => import("../tools/java/java-manager.vue") },
  { key: "python", name: "Python", icon: "icon-python", component: () => import("../tools/python/py-manager.vue") },
  { key: "git", name: "Git for Windows", icon: "icon-git", component: () => import("../tools/git/git-manager.vue") },
  { key: "mysql", name: "MySQL", icon: "icon-mysql", component: () => import("../tools/git/git-manager.vue") },
  { key: "mongodb", name: "MongoDB", icon: "icon-mongodb", component: () => import("../tools/git/git-manager.vue") },
]);
const activeKey = useSessionShallowRef("main:active-key", tools.value[0].key);
const appStore = useAppStore();
watch(activeKey, key => appStore.setSecondTitle(tools.value.find(it => it.key === key)?.name), { immediate: true });
</script>

<template>
  <grid class="full-view main-page" cols-preset="two-cols-0">
    <div class="flex-column tools">
      <template v-for="it in tools" :key="it.key">
        <a-tooltip :title="it.name" placement="right" :mouse-leave-delay="0">
          <div :class="['tool-item', it.key === activeKey && 'active']" @click="activeKey = it.key">
            <custom-icon :type="it.icon" />
          </div>
        </a-tooltip>
      </template>
    </div>
    <div class="toggle-view-container">
      <toggle-view :active-key="activeKey">
        <toggle-item v-for="it in tools" :key="it.key" :component="it.component" :item-id="it.key" />
      </toggle-view>
    </div>
  </grid>
</template>

<style lang="less">
.main-page {
  .tools {
    row-gap: 16px;
    border-right: 1px solid var(--border-color);
    box-sizing: border-box;
  }

  .tool-item {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;

    .anticon {
      font-size: 32px;
    }

    &:hover {
      background-color: var(--color-bg-text-hover);
    }

    &::before {
      content: "";
      position: absolute;
      right: -1px;
      height: 0;
      width: 3px;
      background-color: transparent;
      transition: all 0.5s;
    }

    &.active::before {
      background-color: var(--primary-color);
      height: 100%;
    }
  }
}
</style>
